<template>
    <div>
        <ant-table
            :columns="columns"
            :data="data"
            :status="status"
            @Change="Change"
            @handleSubmit="handleSubmit"
            @Reset="Reset"
            @onSelectChange="onSelectChange"
            @emptySelect="emptySelect"
            @Add="Add"
            @SureDelete="SureDelete"
            :selectedRowKeys="selectedRowKeys"
            add
            batch
            Bsearch
            more
            :actions="options"
            >

            <span slot="sex" slot-scope="sex">
                <span v-if="sex === 13">男</span>
                <span v-else>女</span>
            </span>

            <template #search>
                <a-form layout="inline">

                    <a-form-item label="姓名">
                        <a-input v-model="form.name" placeholder="请输入姓名" />
                    </a-form-item>

                    <a-form-item label="身份证">
                        <a-input v-model="form.name" placeholder="请输入身份证" />
                    </a-form-item>

                    <a-form-item label="学号">
                        <a-input v-model="form.name" placeholder="请输入学号" />
                    </a-form-item>

                    <a-form-item v-if="status" label="年级班级">
                        <a-input v-model="form.name" placeholder="请选择年级班级" />
                    </a-form-item>

                    <a-form-item v-if="status" label="就读方式">
                        <a-input v-model="form.name" placeholder="请选择就读方式" />
                    </a-form-item>

                    <a-form-item v-if="status" label="是否音体美学生">
                        <a-select v-model="form.type" @change="onChange" placeholder="请选择学生类型">
                            <a-select-option value="1">是</a-select-option>
                            <a-select-option value="2">不是</a-select-option>
                        </a-select>
                    </a-form-item>

                </a-form>
            </template>

        </ant-table>

        <!-- 打开抽屉 -->
        <open-drawer
            v-if="visible"
            :visible="visible"
            :title="title"
            @onClose="onClose"
            @Submit="Submit"
            :roleList="roleList"/>
            
    </div>
</template>
<script lang="ts">
import { allStudent } from "~/logicLib/StudentFilesModule/StudentBasicInformation/student";

import { Component, Vue } from "vue-property-decorator";
const OpenDrawer = () => import("./Operation.vue").then(m => m.default || m);

@Component({
    name: "sys-user",
    layout: "menu",
    components: {
        OpenDrawer
    }
})
export default class SysUser extends Vue {
    form: Object = {};
    status: boolean = false;
    selectedRowKeys: string[] = [];
    options: string[] = ["详情", "修改"];
    visible: boolean = false;
    title: string = "添加";
    data: any[] = [];
    type: number = 2;
    columns: any[] = [
        {
            title: "学生姓名",
            dataIndex: "student_name.zh",
            width: "20%"
        },
        {
            title: "学生学号",
            dataIndex: "student_number",
            width: 180
        },
        {
            title: "身份证号",
            dataIndex: "idcard",
            width: 180
        },
        {
            title: "性别",
            key: "sex",
            dataIndex: "sex",
            width: 80,
            scopedSlots: { customRender: 'sex' },
        },
        {
            title: "操作",
            key: "action",
            width: 100,
            scopedSlots: { customRender: "action" }
        }
    ];
    roleList: any[] = [
        {
            id: 1,
            title: "基础角色"
        },
        {
            id: 2,
            title: "超级管理员角色"
        }
    ];
    Change(val: boolean) {
        this.status = !val;
    }
    handleSubmit() {
        console.log(this.form);
    }
    Reset() {
        this.form = {};
    }
    onSelectChange(val: string[]) {
        console.log(val, "选择的数组");
        this.selectedRowKeys = val;
    }
    emptySelect() {
        this.selectedRowKeys = [];
    }
    confirm(val: object) {
        console.log("点击了确定", val);
    }
    cancel() {
        console.log("点击了取消");
    }
    onClose() {
        this.visible = false;
    }
    Add() {
        this.visible = true;
        this.title = "添加";
    }
    Submit(val) {
        this.visible = false;
        console.log(val, "添加的值");
        this.$message.success("添加成功");
    }
    SureDelete(){
        console.log("批量删除");
    }
    Actions(val: string, record: object) {
        switch (val) {
            case "详情":
                this.visible = true;
                this.title = "详情";
                break;
            case "密码":
                break;
            case "删除":
                break;
            default:
                break;
        }
    }

    onChange(val) {
        console.log(val, '类型')
        this.type = val;
    }

    created() {
        const that: any = this;
        this.$nextTick(() => {
            allStudent(this).then(res => {
                that.data = res
                console.log(res, 'success student')
            }).catch(err => {
                console.log(err, 'error student')
            });
        });
        
    }
}
</script>
